<template>
    <div class="bobxxxssw">
        <!-- 下面第一个图表 -->
        <div id="mainsecond"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
    components: {},
    data() {
        return {
            chengZhengData: ["广东", "江苏", "四川"],
            qiYiData: [1000, 780, 400],
            myChart: null, // 存储 ECharts 实例
            intervalId: null, // 定时器 ID
        };
    },
    created() {
        // this.getDataList();
    },
    mounted() {
        this.initCharts();
        this.startDataGrowth(); // 开始模拟数据增长
    },
    beforeDestroy() {
        // 清除定时器，避免内存泄漏
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    },
    methods: {
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            this.myChart = echarts.init(document.getElementById("mainsecond"));
            // 实现响应式，跟随页面变化
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });

            // 初始化图表
            this.updateChart();
        },
        updateChart() {
            const option = {
                tooltip: {
                    show: true,
                    formatter: "{b}: {c}笔",
                },
                grid: {
                    left: "5%",
                    top: "12%",
                    right: "1%",
                    bottom: "8%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    inverse: true, // 排序
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        interval: 0, // 横轴信息全部显示
                        rotate: 30, // -30度角倾斜显示
                    },
                    data: [...this.chengZhengData],
                },
                yAxis: [
                    {
                        type: "value",
                        show: true,
                        position: "top",
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            formatter: "{value}", // 在 Y 轴刻度值后添加单位“笔”
                        },
                    },
                ],
                series: [
                    {
                        name: "能耗值",
                        type: "bar",
                        barWidth: "40%", // 设置柱子宽度
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                formatter: "{c}笔",
                                textStyle: {
                                    color: "white", // 文字颜色
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: [8, 8, 0, 0], // 圆角效果
                                // 使用渐变色填充，模拟光照效果
                                color: function (params) {
                                    const colorList = [
                                        ["#fac858", "rgba(250, 200, 88, 0.6)"],
                                        ["#1ace4a", "rgba(26, 206, 74, 0.6)"],
                                        ["#91cc75", "rgba(145, 204, 117, 0.6)"],
                                    ];
                                    const index = params.dataIndex % colorList.length;
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            { offset: 0, color: colorList[index][0] }, // 顶部颜色
                                            { offset: 1, color: colorList[index][1] }, // 底部颜色
                                        ]
                                    );
                                },
                                // 添加阴影效果
                                shadowBlur: 10, // 阴影模糊程度
                                shadowColor: "rgba(0, 0, 0, 0.3)", // 阴影颜色
                                shadowOffsetY: 5, // 阴影偏移量
                            },
                        },
                        data: [...this.qiYiData],
                    },
                ],
            };

            // 更新图表
            this.myChart.setOption(option);
        },
        startDataGrowth() {
            // 每隔 5 秒更新一次数据
            this.intervalId = setInterval(() => {
                this.qiYiData = this.qiYiData.map((value) => {
                    // 模拟数据增长（随机增加 10 到 50 的值）
                    return value + Math.floor(Math.random() * 41) + 10;
                });
                // 重新渲染图表
                this.updateChart();
            }, 86400000); // 86400000 毫秒 = 5 秒
        },
    },
};
</script>

<style>
#mainsecond {
    height: 200px;
    /* width: 580px; */
    box-sizing: border-box;
    padding: 5px;
}

.bobxxxssw {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
}
</style>